import React, { Component } from 'react'
import { Layout, Button, message, Select } from 'antd';
import './index.scss';
const { Content } = Layout;
const { Option } = Select;
const constraints = window.constraints = {
    audio: false,
    video: true
}
let video
export default class P5_video_filter extends Component {
    componentDidMount() {

        video = this.refs['video'];

        const constraints = {
            audio: false,
            video: true
        }

        navigator.mediaDevices.getUserMedia(constraints).then(this.handleSuccess).catch(this.handleError);
    }



    handleSuccess = (stream) => {

        window.stream = stream;
        video.srcObject = stream;
    }

    handleError(error) {
        if (error.name === 'ConstraintNotSatisfiedError') {
            const v = constraints.video;
            message.error(`宽:${v.width.exact} 高:${v.height.exact} 设备不支持`);
        } else if (error.name === 'PermissionDeniedError') {
            message.error('没有摄像头和麦克风的使用权限,请点击允许按钮');
        }
        message.error('getUserMedia错误:', error);
    }

    handChange = (value) => {
        video.className = value;
        console.log('className:', value);
        this.setState({})
    }
    render() {
        {
            console.log('render now');
        }
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}>
                    <video ref="video" weight="1024" height="700" playsInline autoPlay></video><br /><br />
                    <Select defaultValue="none" style={{ width: '100px' }} onChange={this.handChange}>
                        <Option value="none">没有滤镜</Option>
                        <Option value="blur">模糊</Option>
                        <Option value="grayscale">灰度</Option>
                        <Option value="invert">反转</Option>
                        <Option value="sepia">深褐色</Option>
                    </Select>
                </Content>
            </div>
        )
    }
}
